<template>

    <vue-table :data-source="tableList">
        <template slot="header">
            <tr>
                <th>姓名</th>
                <th>工号</th>
                <th>电话</th>
                <th>部门</th>
                <th>昵称</th>
                <th>头像</th>
                <th>添加时间</th>
                <!--<th>操作</th>-->
            </tr>
        </template>
        <template slot="tbody" slot-scope="props">

            <tr>
                <td>{{props.item.teachers_name}}</td>
                <td>{{props.item.teachers_code}}</td>
                <td>{{props.item.mobile}}</td>
                <td>{{props.item.org.organizational_name}}</td>
                <th>{{props.item.nick_name}}</th>
                <th v-html="imgBuild(props.item.head)">{{imgBuild(props.item.head)}}</th>
                <td>{{props.item.created_at}}</td>
                <!--<td class="col-lg-2">-->
                    <!--&lt;!&ndash;<button title="考试" class="btn btn-white btn-xs m-b-none"&ndash;&gt;-->
                    <!--&lt;!&ndash;v-on:click="showExamDialog(props.item.id)">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="fa fa-pencil list-btn-i"></i>考试&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button title="修改" class="btn btn-white btn-xs m-b-none"&ndash;&gt;-->
                            <!--&lt;!&ndash;v-on:click="showEditDialog(props.item.id)">&ndash;&gt;-->
                        <!--&lt;!&ndash;<i class="fa fa-pencil list-btn-i"></i>编辑&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="btn btn-white btn-xs m-b-none" title="删除"&ndash;&gt;-->
                            <!--&lt;!&ndash;v-on:click="showDeleteDialog(props.item.id)">&ndash;&gt;-->
                        <!--&lt;!&ndash;<i class=" fa fa-trash list-btn-i"></i> 删除&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->
                <!--</td>-->

            </tr>

        </template>
    </vue-table>
</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: 'api/teachers'
                })
            };
        },
        methods: {
            imgBuild(path){
                let Imgpath = path;
              if(Imgpath){
                  return "<img style='width: 80px' class='img-thumbnail' src='"+Imgpath+"'/>";
              }
            },
            showDeleteDialog: function (uuid) {
                this.stateManager.deleteDialogVisible = true;
                this.stateManager.deleteModelId = uuid;
            }
        },
        computed: {
            user(){
                return this.$store.state.user;
            },

            tableList(){
                if (this.stateManager.refreshList) {
                    this.list.fetch();
                    this.stateManager.refreshList = false;
                }
                return this.list;
            }
        }
    }
</script>